<template>
  <el-row>
    <div style="float: left;font-size: 25px;color: gray;font-weight: bold">修改个人信息</div>
  </el-row>
  <el-divider border-style="solid" style="margin: 10px 0"/>
  <el-card style="margin: 0 auto;width:1000px">
    <el-row class="rowI">
      <el-col :span="20">
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">姓名 :</div>
              </el-col>
              <el-col :span="14">
                <el-input v-model="user.nickname" class="colInput"/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">性别 :</div>
              </el-col>
              <el-col :span="22">
                <el-select v-model="user.gender" class="colInputRight" placeholder="请选择">
                  <el-option v-for="item in c1" :value="item.value"/>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">手机号码 :</div>
              </el-col>
              <el-col :span="14">
                <el-input v-model="user.mobile" class="colInput"/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">年龄 :</div>
              </el-col>
              <el-col :span="22">
                <el-input v-model="user.age" class="colInputRight"/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">出生年月 :</div>
              </el-col>
              <el-col :span="14">
                <div style="margin-left: -80px">
                  <el-date-picker v-model="user.birthday" type="date" placeholder="请选择" format="YYYY/MM/DD"/>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">民族 :</div>
              </el-col>
              <el-col :span="22">
                <el-select v-model="user.ethnicGroup" class="colInputRight" placeholder="请选择">
                  <el-option v-for="item in c2" :value="item.value"/>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">证件类型 :</div>
              </el-col>
              <el-col :span="14">
                <el-select v-model="user.documents" class="colInput" placeholder="请选择">
                  <el-option v-for="item in c5" :value="item.value"/>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">证件号码 :</div>
              </el-col>
              <el-col :span="22">
                <el-input v-model="user.idNumber" class="colInputRight"/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">是否有遗传病史 :</div>
              </el-col>
              <el-col :span="14">
                <el-select v-model="user.isGenetic" class="colInput" placeholder="请选择">
                  <el-option v-for="item in c3" :value="item.value"/>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">婚姻情况 :</div>
              </el-col>
              <el-col :span="22">
                <el-select v-model="user.maritalStatus" class="colInputRight" placeholder="请选择">
                  <el-option v-for="item in c6" :value="item.value"/>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="4">
            <div class="textDiv">通讯地址 :</div>
          </el-col>
          <el-col :span="20">
            <el-input v-model="user.address" class="textInput"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="textDiv">备注 :</div>
          </el-col>
          <el-col :span="20">
            <el-input v-model="user.remark" type="textarea" :rows="4" class="textInput"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div style="width: 234px;height: 100%;border: 1px solid gray;margin-left: -100px">
          <img v-if="user.imgUrl!=null&&user.imgUrl!==''&&fileList.length===0"
               :src="BASE_URL+user.imgUrl"
               style="margin-top: 10px;border-radius: 5px;width: 214px;height: 280px"
               alt="人物头像"/>
          <img v-if="(user.imgUrl==null||user.imgUrl==='')&&fileList.length===0"
               style="margin-top: 10px;border-radius: 5px;width: 214px;height: 280px"
               src="https://demo2022.axureshop.com/2201312/images/%E6%82%A3%E8%80%85%E7%AE%A1%E7%90%86/u1990.svg"
               alt="人物头像"/>
          <el-upload
              :limit="1"
              name="file"
              list-type="picture-card"
              v-model:file-list="fileList"
              :headers="customHeaders"
              :action="BASE_URL+'/v1/upload'"
              :on-success="handleSuccess"
          >
            <el-button style="margin:31px 110px 0 0;width: 100px;background-color: #409EFF;
                color: white;border: 1px solid #409EFF">
              选择
            </el-button>
            <template #file="{ file }">
              <img :src="file.url" alt="人物头像" class="fileImg"/>
            </template>
            <template #tip>
              <div v-if="fileList.length>0" style="height: 25px"></div>
              <div style="font-weight: bold;font-size: 15px;margin-top: 15px" class="divPhoto">照片要求:</div>
              <div class="divPhoto">1.仅支持jpg、png、bmp格式</div>
              <div class="divPhoto">2.最大不超过2000px,最小不低于160px</div>
            </template>
          </el-upload>
          <el-button style="position:absolute;top:295px;left: 823px;width: 100px;background-color: white;
                color: #409EFF;border: 1px solid #409EFF" @click="handleRemove">
            清空
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div style="margin: 0 auto">
        <el-button style="width: 160px;background-color: #409EFF;
                 color: white"
                   @click="save()">保 &nbsp; &nbsp; 存
        </el-button>
      </div>
    </el-row>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const fileList = ref([]);
const fileListLow = ref();
const handleSuccess = (uploadFile) => {
  fileListLow.value = uploadFile.data;
}
const handleRemove = () => {
  if (fileListLow !== undefined) {
    user.value.imgUrl = null;
    fileList.value.pop();
    axios.post(BASE_URL + '/v1/remove?imgUrl=' + fileListLow.value);
  }
};

const user = ref({})
const c1 = [{value: '男'}, {value: '女'}]
const c2 = [{value: '汉族'}]
const c3 = [{value: '是'}, {value: '否'}]
const c5 = [{value: '身份证'}, {value: '护照'}, {value: '驾驶证'}, {value: '警官证'}, {value: '港澳通行证'}, {value: '其他证件'}]
const c6 = [{value: '已婚'}, {value: '未婚'}, {value: '离异'}]

const userToken = ref(localStorage.getItem("user-token") ?
    JSON.parse(localStorage.getItem("user-token")) : null);
const userId = ref(localStorage.getItem("user-id")?
    JSON.parse(localStorage.getItem("user-id")):null);
const userNickname = ref(localStorage.getItem("user-nickname")?
    JSON.parse(localStorage.getItem("user-nickname")):null);
const userImgUrl = ref(localStorage.getItem("user-imgUrl")?
    JSON.parse(localStorage.getItem("user-imgUrl")):null)
const customHeaders = ref({'Authorization':userToken.value})

onMounted(() => {
  if (userToken.value == null) {
    alert("请先登录!");
    router.push("/patient/login");
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;
  axios.get(BASE_URL + '/v1/users/selectUser/' + userId.value).then((response) => {
    if (response.data.code === 20000) {
      user.value = response.data.data;
    }else ElMessage.error(response.data.message);
  })
})
const save = () => {
  if (fileList.value.length > 0) {
    axios.post(BASE_URL + "/v1/remove?imgUrl=" + user.value.imgUrl);
    user.value.imgUrl = fileList.value[0].response.data;
  }
  user.value.id = userId.value;
  let data = qs.stringify(user.value);
  axios.post(BASE_URL + '/v1/users/updateUser', data).then((response) => {
    if (response.data.code === 20000) {
      ElMessage.success("修改完成!")
      userNickname.value = user.value.nickname;
      userImgUrl.value = user.value.imgUrl;
      localStorage.setItem('user-nickname',JSON.stringify(userNickname.value));
      localStorage.setItem('user-imgUrl',JSON.stringify(userImgUrl.value));
      location.reload();
      router.push('/patient/information')
    }
  })
}
</script>


<style scoped>
/deep/ .el-upload-list--picture-card {
  width: 214px;
  height: 0;
}

/deep/ .el-upload--picture-card {
  width: 214px;
  height: 0;
  border: none;
}

/deep/ .el-upload-list__item.is-success {
  width: 214px;
  height: 280px;
  margin: 10px 0 4px 0;
}

.fileImg {
  width: 214px;
  height: 280px;
}

.colInput {
  margin-left: -80px;
  width: 220px
}

.colInputRight {
  margin-left: -80px;
  width: 200px
}

.rowI {
  margin-bottom: 20px
}

.textDiv {
  margin-left: 20px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}

.textInput {
  width: 545px;
  margin-left: -120px
}

.divLeft {
  margin-left: -10px;
  width: 130px;
  height: 30px;
  line-height: 30px;
  text-align: right
}

.divRight {
  margin-left: -15px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: right
}

.divPhoto {
  font-size: 13px;
  text-align: left;
  padding-left: 20px
}
</style>
